<template>
	<div class="diy-form">
		<a-layout>
			<a-layout-header>
				<div class="flex justify-content-between">
					<span class="form-title">自定义表单</span>
					<a-space>
						<template><slot name="beforeBtn"></slot></template>
						<a-button v-if="importJSONBtn" @click="importJSON"
							>导入JSON</a-button
						>
						<a-button v-if="exportJSONBtn" @click="exportJSON"
							>生成JSON</a-button
						>
						<a-button v-if="previewBtn" @click="preview"
							>预览</a-button
						>
						<a-button
							v-if="resetBtn"
							type="primary"
							ghost
							@click="reset"
							>{{ resetBtnText }}</a-button
						>
						<a-button type="primary" @click="submit">{{
							submitBtnText
						}}</a-button>
						<template><slot name="afterBtn"></slot></template>
					</a-space>
				</div>
			</a-layout-header>
			<a-divider class="mg-0" style="background: transparent" />
			<a-layout>
				<a-layout-sider theme="light" class="sider-left items-content">
					<LeftForm class="items" :components="components" />
				</a-layout-sider>
				<a-divider type="vertical" class="mg-0" />
				<a-layout-content class="items-content">
					<Contents
						:formData.sync="formData"
						class="items"
						:select.sync="select"
                        @selectValue="selectValue"
					/>
				</a-layout-content>
				<a-divider type="vertical" class="mg-0" />
				<a-layout-sider theme="light" class="sider-right items-content">
					<RightForm
						:select.sync="select"
						:formConfig.sync="formData.config"
						class="items"
					/>
				</a-layout-sider>
			</a-layout>
		</a-layout>
		<a-modal
			v-model="visible"
			:title="title"
			:destroyOnClose="true"
			width="40%"
			:footer="readonly ? null : undefined"
		>
			<div v-if="!readonly">
				JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可
			</div>
			<div style="max-height: 400px; overflow-y: scroll">
				<a-input
					type="textarea"
					v-model="JSONData"
					autoSize
					allowClear
					:readOnly="readonly"
				></a-input>
			</div>
			<div slot="footer">
				<a-button @click="cancel">取消</a-button>
				<a-button type="primary" @click="confirm">确定</a-button>
			</div>
		</a-modal>
		<Preview ref="preview" @getData="exportJSON" />
	</div>
</template>

<script>
import LeftForm from "./components/left/left-form.vue"
import Contents from "./components/center/contents.vue"
import RightForm from "./components/right/right-form.vue"
import components from "./components/component"
import Preview from "./components/preview.vue"
export default {
	name: "DivForm",
	props: {
		// 导入json按钮
		importJSONBtn: {
			type: Boolean,
			default: true,
		},
		// 生成json按钮
		exportJSONBtn: {
			type: Boolean,
			default: true,
		},
		// 预览按钮
		previewBtn: {
			type: Boolean,
			default: true,
		},
		// 取消按钮
		resetBtn: {
			type: Boolean,
			default: true,
		},
		// 取消按钮文字
		resetBtnText: {
			type: String,
			default: "取消",
		},
		// 保存按钮文字
		submitBtnText: {
			type: String,
			default: "保存",
		},
		value: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	components: {
		LeftForm,
		Contents,
		RightForm,
		Preview,
	},
	watch: {
		select: {
			handler(data) {},
			deep: true,
		},
		value: {
			handler(data) {
				this.$emit("input", data)
			},
			immediate: true,
			deep: true,
		},
	},
	data() {
		return {
			components,
			formData: {
				config: {
					labelCol: 4,
					wrapperCol: 20,
					layout: "horizontal",
					labelAlign: "right",
					colon: true,
				},
				list: [],
			},
			select: {
				type: "",
			},
			visible: false,
			title: "",
			readonly: false,
			JSONData: "",
		}
	},
    mounted(){
        this.formData = { ...this.formData, ...this.value }
    },
	methods: {
		// 导入
		importJSON() {
			this.visible = true
			this.readonly = false
			this.title = "导入JSON"
			this.JSONData = JSON.stringify(this.formData, null, 4)
		},
		// 导出
		exportJSON() {
			this.visible = true
			this.readonly = true
			this.title = "生成JSON"
			this.JSONData = JSON.stringify(this.formData, null, 4)
		},
		preview() {
			this.$refs.preview.show(this.formData)
		},
		// 取消
		reset() {
			this.$confirm({
				title: "提示",
				content: "确定取消？",
				onOk:()=> {
					this.formData = {
						config: {
							labelCol: 4,
							wrapperCol: 20,
							layout: "horizontal",
							labelAlign: "right",
							colon: true,
						},
						list: [],
                        ...this.value
					}
					this.select = {
						type: "",
					}
				},
			})
		},
		// 保存
		submit() {
            this.$emit("input", this.formData)
		},
		// 确定导入
		confirm() {
			this.formData = JSON.parse(this.JSONData)
            this.$emit("input", this.formData)
			this.select = this.formData?.list?.[0] || {
				type: "",
			}
			this.visible = false
		},
		// 取消导入
		cancel() {
			this.visible = false
			this.JSONData = ""
		},
        // 选中
        selectValue(data){
            this.$emit('select', data);
        }
	},
}
</script>
<style lang="less" scoped>
.diy-form {
	height: 100%;
	.ant-layout-header {
		background-color: #fff;
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
		.form-title {
			font-size: 18px;
		}
	}
	.ant-layout-content {
		padding: 0;
	}
	.ant-layout {
		height: 100%;
	}
	.sider-left {
		width: 300px !important;
		min-width: 300px !important;
		max-width: 300px !important;
	}
	.sider-right {
		width: 350px !important;
		min-width: 350px !important;
		max-width: 350px !important;
	}
	.items-content {
		position: relative;
		.items {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			overflow-y: auto;
			&::-webkit-scrollbar {
				width: 0;
			}
		}
	}
}
</style>
